<template>
  <div>
    <!-- Vue2 的 v-model -->
    <!-- 
      1. 传入一个 value 属性
      2. 监听了 input 事件
    -->
    <!-- <son :value="money" @input="val => money = val" /> -->
    <!-- 这是 vue 2 的语法 -->
    <!-- <son v-model="money" /> -->
    <!-- Vue 3 中已经做了修改, 不再是处理这两个属性了 -->
    <!-- 
      1. 传入一个 modelValue 属性
      2. 监听 update:modelValue 属性
     -->
     <son :model-value="money" @update:modelValue="val => money = val" />
     <son v-model="money" />

    <!-- 为什么 Vue3 这样设计? -->
    <!-- 为了整合 .sync 和 v-model -->
    <!-- 在 Vue 2 中, v-model 只能绑定一个属性, 如果需要绑定多个属性则需要借助 .sync 修饰符 -->
    <!-- .sync 修饰符在 Vue 3 已被移除, 直接被 v-model 取代 -->
    <!-- 语法如下: -->
    <son v-model="money" v-model:house="house"  />

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Son from './Son.vue';

const money = ref(1000)
const house = ref('武湖新天地')


</script>

<style scoped>

</style>